<template>
    <div>
      <!-- 插槽 默认 具名 作用域 可以相当于我们组件的传值 -->
      <!-- <som1>
        <p>默认插槽</p>
        <h1 slot="name1">
          <p>111</p>
          具名插槽
        </h1>
        <div slot="name3">
          <p>{{obj[0].id}}</p>
          <p>{{obj[0].name}}</p>
          
        </div>
      </som1> -->
      <!-- 作用域 -->
      <!-- #名字/v-slot:名字 可以一一对应传过来的值 -->
  
      <som1>
        <!-- slot-scope可以接收全部过来的值，如果传过来的是数组，就不能用[]去拿值，如果要用[]去拿，则子组件必须只有一个插槽传值，但可以用v-for去拿到 -->
        <div slot-scope="data2">
          <div v-for="(item,index) in data2.data1" :key="item.id">{{item.name }}{{ index }}</div>
          <div>{{ data2.data1[0].name}}</div>
          </div>
      </som1>
      <!-- <som1 v-slot:w="data10">{{data10.data1[0].name}}</som1> -->
    </div>
  </template>
  <script>
  import som from "@/components/som.vue";
  import som1 from "@/components/som1.vue";
  export default {
    data() {
      return {
        obj: [
          { id: "1", name: "张三" },
          { id: "2", name: "陈家旺" },
        ],
      };
    },
    created() {},
    computed: {},
    components: {
      som,
      som1,
    },
    methods: {},
  };
  </script>
  <style scoped>
  </style>